<template>
    <div>
        <div class="ContentTre" >
            <content-title :content="title"></content-title>
            <div class="ContentTre-left" @mouseenter="enter" @mouseleave="leave">
                <h2 class="ContentTre-left-title"></h2>
                <div class="ContentTre-left-select">
                    <span class="ContentTre-left-dot" @click="click" att="0"></span>
                    <span class="ContentTre-left-dot" @click="click" att="1"></span>
                    <span class="ContentTre-left-dot" @click="click" att="2"></span>
                </div>
                <div class="ContentTre-left-img">
                    <img :src="imgUrl[index]" alt="" width="100%">
                </div>
            </div>
            <div class="ContentTre-right">
                <div class="ContentTre-right-header">
                    <h2 class="ContentTre-right-title"></h2>
                    <ul class="ContentTre-right-list">
                        <li class="ContentTre-right-list-item">#骁浪荒川之主#</li>
                        <li class="ContentTre-right-list-item">#青莲蜕梦#</li>
                        <li class="ContentTre-right-list-item">#新SSR大岳丸#</li>
                        <li class="ContentTre-right-list-item">#大江山音乐剧#</li>
                        <li class="ContentTre-right-list-item">#鬼切新皮肤#</li>
                    </ul>
                </div>
                <ul class="ContentTre-right-bottom">
                    <li class="ContentTre-right-bottom-item">
                        <div class="ContentTre-right-bottom-item-img">
                            <img src="/static/img/content3-right1.jpg" alt="" width="100%">
                        </div>
                        <div class="ContentTre-right-bottom-item-content">
                            <p class="ContentTre-right-bottom-item-title">我的王，他将远行</p>
                            <span class="ContentTre-right-bottom-item-author">作者：华胤道长</span>
                        </div>
                    </li>
                    <li class="ContentTre-right-bottom-item">
                        <div class="ContentTre-right-bottom-item-img">
                            <img src="/static/img/content3-right2.jpg" alt="" width="100%">
                        </div>
                        <div class="ContentTre-right-bottom-item-content">
                            <p class="ContentTre-right-bottom-item-title">COS：彼岸花</p>
                            <span class="ContentTre-right-bottom-item-author">作者：GS镜子</span>
                        </div>
                    </li>
                    <li class="ContentTre-right-bottom-item">
                        <div class="ContentTre-right-bottom-item-img">
                            <img src="/static/img/content3-right3.jpg" alt="" width="100%">
                        </div>
                        <div class="ContentTre-right-bottom-item-content">
                            <p class="ContentTre-right-bottom-item-title">夏日花火祭</p>
                            <span class="ContentTre-right-bottom-item-author">作者：誰哈那</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import ContentTitle from "@/main/components/ContentTitle"
import { setInterval, clearInterval } from 'timers';
export default {
    name: "ContentTre",
    components: {
        ContentTitle
    },
    data(){
        return {
            "title": "2",
            "imgUrl": ["/static/img/content3_left1.jpg","/static/img/content3_left2.png","/static/img/content3_left3.jpg"],
            "index": 0,
            "setTimer": ''
        }
    },
    mounted(){
        this.init();
        this.m();
    },
    methods: {
        init(){
            $(".ContentTre-left-dot").eq(0).css({
                "background-position": "-1214px -452px"
            }).siblings().css({
                "background-position": "-1190px -452px"
            })
            this.index = 0
        },
        m(){
            let len = this.imgUrl.length
            this.setTimer = setInterval(()=>{
                this.index ++;
                if(this.index>=len){
                    this.index = 0
                }
                $(".ContentTre-left-dot").eq(this.index).css({
                    "background-position": "-1214px -452px"
                }).siblings().css({
                    "background-position": "-1190px -452px"
                })
            },2000)
        },
        enter(){
            clearInterval(this.setTimer);
        },
        leave(){
            this.m()
        },
        click(e){
            if(e.target.nodeName === "SPAN"){
                $(e.target).css({
                    "background-position": "-1214px -452px"
                }).siblings().css({
                    "background-position": "-1190px -452px"
                })
                this.index = $(e.target).attr("att")*1;
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
    .ContentTre
        position: relative
        margin: 1rem auto
        width: 85%
        height: 10rem
        background: red
        background: url("/static/img/content3_bg.jpg") no-repeat bottom/100%
        .ContentTre-left
            position: absolute
            top: 0px
            left: 136px
            width: 6rem
            height: 9.12rem
            .ContentTre-left-title
                position: absolute
                left: 0
                top: 0
                width: 1.9rem
                height: .46rem
                background: url("/static/img/box1.png") -155px -250px
            .ContentTre-left-select
                display: flex
                flex-flow: row
                justify-content: space-around
                position: absolute
                right: 0
                top: 4px
                width: 1.42rem
                height: .36rem
                border-left: .02rem solid #ccc
                .ContentTre-left-dot
                    display: inline-block
                    width: .28rem
                    height: .38rem
                    background: url("/static/img/box1.png") -1190px -452px
            .ContentTre-left-img
                position: absolute
                top: 41px
                width: 6rem
                height: 8.3rem
                background: #ccc
        .ContentTre-right
            position: absolute
            right: 0
            width: 14.4rem
            height: 9.3rem
            .ContentTre-right-header
                position: relative
                width: 100%
                height: .46rem
                .ContentTre-right-title
                    position: absolute
                    left: 0
                    width: 1.9rem
                    height: 100%
                    background: url("/static/img/box1.png") -1085px -452px
                .ContentTre-right-list
                    position: absolute
                    right: 0
                    width: 12.08rem
                    height: 100%
                    .ContentTre-right-list-item
                        position: relative
                        float: left 
                        margin: 0 .29rem
                        line-height: .46rem
                        font-size: 12px
                        color: #bf9962
                    .ContentTre-right-list-item::after
                        position: absolute
                        right: -15px
                        content: '.'
                        top: 5px
                        font-size: 0
                        width: 0
                        height: .24rem
                        border-right: .02rem solid #bf9962
                    .ContentTre-right-list-item:hover
                        text-decoration: underline
            .ContentTre-right-bottom
                display: flex
                flex-flow: row wrap
                justify-content: space-between
                position: absolute
                bottom: 0
                width: 14.4rem
                height: 8.64rem
                .ContentTre-right-bottom-item
                    width: 4.36rem
                    height: 100%
                    .ContentTre-right-bottom-item-img
                        height: 6.98rem
                    .ContentTre-right-bottom-item-content
                        margin-top: .2rem
                        margin-left: .2rem
                        width: 4rem
                        height: .76rem
                        border-left: .02rem solid #000
                        .ContentTre-right-bottom-item-title
                            width: 90%
                            margin: 0 auto
                            font-weight: 500
                            font-size: 14px
                            line-height: .4rem
                        .ContentTre-right-bottom-item-author
                            display: block
                            width: 90%
                            margin: 0 auto
                            font-size: 12px
                            color: #aaa
                            line-height: 20px
</style>
